<template>
  <!-- 台数里程 -->
  <div class="pieChait">
    <div>
      <PublicTop :index="4" />
    </div>
    <div class="flex">
      <dv-active-ring-chart :config="config" style="width: 2.3rem; height: 2.3rem" />
    </div>
    <div class="text">
      <div class="box">
        <div class="topText">本月台次</div>
        <div class="bomText">
          <animate-number from="0" :to="fieldObj.monthCount || 0" :key="fieldObj.monthCount || 0" class="number" />
        </div>
      </div>
      <div class="box right">
        <div class="topText">总里程</div>
        <div class="bomText">
          <animate-number from="0" :to="fieldObj.totalMileage || 0" :key="fieldObj.totalMileage || 0" class="number" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PublicTop from "./../publicTop/index.vue";
import { getGetCarApplyStatistics } from "@/api/dataV/index";
import { mapState } from "vuex";
export default {
  name: "PieChait",
  components: { PublicTop },
  data() {
    return {
      config: {},
      // fieldObj: {},
    };
  },
  watch: {
    "$store.state.fieldObj": {
      handler: function (o) {
        this.option = o;
      },
    },
  },
  beforeDestroy() {
    clearInterval(this.trme);
  },
  computed:{
    ...mapState(['fieldObj'])
  },
  mounted() {
    window.addEventListener("resize", this.resizeView);
    // const store = this.$store.state.fieldObj;
    // if (JSON.stringify(store) !== "{}") {
    //   this.fieldObj = store;
    // }
    this.init();
  },
  methods: {
    init() {
      this.query();
      this.trme = setInterval(() => this.query(), 10000);
    },
    resizeView() {
      setTimeout(() => this.query(), 500);
    },
    query() {
      getGetCarApplyStatistics()
        .then((res) => {
          const dataArr = res.map((v) => {
            return {
              name: v.type,
              value: v.value,
            };
          });

          const color = ["#74f0ff", "#21262b"];
          this.config = {
            data: dataArr,
            color,
            showOriginValue: true,
            digitalFlopStyle: {
              fontSize: 16,
            },
            lineWidth: 12,
            activeTimeGap: 2000,
          };
        })
        .then(() => {
          if (document.getElementsByClassName("active-ring-info")[0]) {
            document.getElementsByClassName("active-ring-info")[0].style.top =
              "-40px";
          }
          if (document.getElementsByClassName("active-ring-info")[2]) {
            document.getElementsByClassName("active-ring-info")[2].style.top =
              "-40px";
          }
          if (document.getElementsByClassName("active-ring-info")[1]) {
            document.getElementsByClassName("active-ring-info")[1].style.top =
              "-40px";
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.pieChait {
  // height: 3.8rem;
  height: 100%;
  background: url(@/assets/datav/itembg.png) no-repeat;
  position: relative;

  .flex {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .text {
    display: flex;
    width: 100%;
    height: 0.6rem;
    margin-top: 0.5rem;
    margin-top: -0.2rem;
    position: absolute;

    bottom: 0;

    .right {
      margin-left: 5px;
    }

    .box {
      flex: 1;
      height: 0.6rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgba(0, 123, 255, 0.1);

      .topText {
        font-size: 0.15rem;
        color: rgb(0, 255, 255);
      }

      .bomText {
        color: rgb(251, 196, 4);
        margin-top: 0.1rem;
        font-size: 0.2rem;
      }
    }
  }
}
</style>
